<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{padding:0;margin:0;font-size:12px;color:#fff}
		.page{
			width:100%;
			height:100vh;
			position:absolute;
			top:0;
			left:0;
			right:0;
		}
		.p1{
			z-index:4;
			background:red;
			-webkit-animation: p1-click 10s linear forwards;
					animation: p1-click 10s linear forwards;
			transition:height="50vh" 2s ;
		}
		@keyframes p1-click{
			0%{
			background:red;
				opacity:1;
				-webkit-transform: rotate(0deg);
						transform: rotate(0deg);
			}
			100%{
			background:blue;
				opacity:0;
				-webkit-transform: rotate(1080deg);
						transform: rotate(1080deg);
			}
		}
			
		.p2{
			z-index:3;
			background:blue;
		}
		.p2.p2-In{
			z-index:4;
			background: black;
			animation:p2-In 1s linear forwards;
		}
		@keyframes p2-In{
			0%{
				opacity:1;
			}
			100%{
				opacity:0;
			}
		}
		.p3{
			z-index:3;
			background:yellow;
		}
	</style>
	<script>
	window.onload=function(){
		var p1 = document.getElementsByTagName("div")[0];
		var p2 = document.getElementsByTagName("div")[1];
		var p3 = document.getElementsByTagName("div")[2];
		p1.onclick=function(){
			p1.display="none";
			p2.display="block";
			p2.setAttribute("class","page p2 p2-In");

		}
	}
	</script>
</head>
<body>
	<div class="page p1"></div>
	<div class="page p2"></div>
	<div class="page p3"></div>
</body>
</html>